<template>
    <div class="admin">
        <div class="search-box">
            <div class="row">
                <div class="left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div class="right">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="queryUserList">查询搜索</el-button>
                </div>
            </div>
            <div class="row row_width">
                <span>账号/姓名</span>
                <el-input v-model="queryParams.keyword" placeholder="请输入姓名/账号"></el-input>
            </div>
        </div>
        <div class="add-area">
            <div class="row">
                <div class="left">
                    <el-icon size="16">
                        <Tickets />
                    </el-icon>
                    <span>数据列表</span>
                </div>
                <div class="right">
                    <el-button type="primary" @click="showDialog = true" v-permission="'addUser'">添加</el-button>
                </div>
            </div>
        </div>
        <div class="box">
            <el-table :data="userList" border table-layout="auto" style="text-align: center">
                <el-table-column prop="id" label="编号" />
                <el-table-column prop="username" label="账号" />
                <el-table-column prop="nickName" label="姓名" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="createTime" label="添加时间">
                    <template #default="{ row }">
                        <span>{{ formateDate(row.createTime) }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="loginTime" label="最后登录">
                    <template #default="{ row }">
                        <span>{{ formateDate(row.loginTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="是否启用">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                            @change="switchStatus(row)" />
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="操作">
                    <template #default="{ row }">
                        <el-button text type="primary" size="small" @click="allocRoleHandle(row.id)"
                            v-permission="'allocRole'">分配角色</el-button>
                        <el-button text type="primary" size="small" @click="editUser(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page">
                <ElConfigProvider :locale="zhCn">
                    <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                        :page-sizes="[10, 20, 50, 100]" background layout="total,sizes, prev, pager, next, jumper"
                        :total="total" @size-change="queryUserList" @current-change="queryUserList" />
                </ElConfigProvider>
            </div>
        </div>
    </div>
    <EditUserVue :show="showDialog" @hide="closeDialog" :id="EditId" />
    <AllocRoleVue :show="showAllocRole" :id="allocId" @hide="hideAlloc" />
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { SwitchUserStatusAPI, UserListAPI } from "./api/admin";
import { Search, Tickets } from "@element-plus/icons-vue";
import { ElConfigProvider, ElMessage } from "element-plus";
import { formateDate } from "@/utils/formatParams"
import EditUserVue from "./editUser.vue";
import AllocRoleVue from "./allocRole.vue";

import zhCn from "element-plus/lib/locale/lang/zh-cn";


const hideAlloc = () => {
    showAllocRole.value = false;
    allocId.value = 0
}

const allocId = ref(0);
const showAllocRole = ref(false)
const allocRoleHandle = (id: number) => {
    showAllocRole.value = true;
    allocId.value = id
}

let EditId = ref(0);
const editUser = (row: IUserModel) => {
    // 把id传入editUser组件
    // 把editUser组件显示出来
    showDialog.value = true;
    EditId.value = row.id as number;
    console.log(EditId.value);
}

// 重置
const reset = () => {
    queryParams.keyword = "",
        queryUserList();
}

const switchStatus = (row: IUserModel) => {
    // console.log(row.id, row.status);
    // ! 表示肯定所有的可能存在
    SwitchUserStatusAPI(row.id!, row.status)
        .then((res) => {
            if (res.code === 200) {
                ElMessage.success("修改成功");
            } else {
                // 修改失败
                row.status = row.status === 1 ? 0 : 1;
            }
        })
        .catch(() => {
            // 修改失败，捕获异常
            row.status = row.status === 1 ? 0 : 1;
            ElMessage.error("修改失败")

        })
};

const showDialog = ref(false)
const closeDialog = () => {
    showDialog.value = false;
    // 重新请求数据
    queryUserList();
}

const queryParams = reactive<IUserListParams>({
    keyword: "",
    pageNum: 1,
    pageSize: 10,
});
const userList = ref<IUserModel[]>([]);
const total = ref(0);
const queryUserList = () => {
    UserListAPI(queryParams).then((res) => {
        userList.value = res.data.list;
        total.value = res.data.total

    });
};
// 请求一开始的默认数据
queryUserList();
</script>
<style lang="less" scoped>
.admin {
    height: 100%;

    .search-box,
    .add-area {
        // box-shadow: 0px 0px 4px 2px #ccc;
        box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 10%);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;


        .row {
            padding: 10px 0px;
            display: flex;
            font-size: 14px;
            align-items: center;
            justify-content: space-between;

            &:first-child {
                justify-content: space-between;
                align-items: center;

                span {
                    padding-left: 10px;
                }
            }

            &:last-child {
                padding-left: 40px;
                // width: 400px;

                span {
                    width: 100px;
                }
            }
        }

        .row_width {
            width: 400px;
        }
    }

    .box {
        margin-top: 20px;
        // padding: 10px 0px;

        :deep(.el-table__cell) {
            font-size: 12px;
            text-align: center;
        }
    }
}

.page {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
